import React, { Component } from 'react'
import * as Utils from '../utils'
import {
	TOKEN,
} from '../constants'
import { Layout } from 'antd'
import { Route, Switch ,withRouter } from 'react-router-dom'
import { URL } from './../constants/urls'
import SiderMenus from './../pages/siderMenus'
import HeaderMenus from './../pages/headerMenus'

import {
	Login,
	Logout,
	UserProfile,
	ChangePassword,
	RegistrationForm,
} from './../pages'


const { Content, Footer } = Layout


/*
* 此页面为定义 router 和 页面关系的容器. 可以认为每次渲染需要访问的页面时, 都会先渲染该页面.
* 该页面可以作为: 统一查看是否登录, 统一错误处理以及需要其他统一处理的页面.
*
* */
class BaseFrame extends Component {
	state = {
		collapsed: false,
	}

	toggleSwitch = () => {
		this.setState({
			collapsed: !this.state.collapsed,
		});
	}
	// 页面渲染之前, 看是否登录
	componentWillMount() {
		let token = Utils.getItem(TOKEN)
		if (!!!token) {
			this.props.history.replace("/login")
		}
	}

	componentWillReceiveProps(nextProps) {
		let token = Utils.getItem(TOKEN)
	}

	/*
	* 使用 react router 作 url 和 页面关联.
	* 每个在该页面定义的页面, 渲染之前, 都会先渲染这个页面, 从而检查是否登录
	*
	* 使用 antd 的 layout 布局:
	* 1. 左侧目录: SiderMenus
	* 2. 页面头部: HeaderMenus
	* 3. 页面内容: Content中 包含的页面
	* */

	render() {
		return (
			<Switch>
				<Route exact path={URL.LOGIN} component={Login} />
				<Route exact path={URL.LOGOUT} component={Logout} />
				<Route exact path={URL.REGISTRATION} component={RegistrationForm} />
				<Layout>
					<SiderMenus
						collapsed={this.state.collapsed}
					/>
					<Layout style={{ minHeight: '100vh' }}>
						<HeaderMenus
							toggleSwitch={this.toggleSwitch}
							collapsed={this.state.collapsed}
						/>
						<Content style={{ textAlign: 'center' }}>
							<Route extra path={URL.GET_USER} component={UserProfile} />
							<Route extra path={URL.CHANGE_PWD} component={ChangePassword} />
						</Content>
						<Footer style={{ textAlign: 'center' }}>
							VTG ©2018
						</Footer>
					</Layout>
				</Layout>
			</Switch>
		)
	}
}

export default withRouter(BaseFrame)